<template>
  <div>
    <a-row :gutter="12">
      <a-col :sm="24" :xxl="8" class="mb">
        <card :title="'电量预警消息'">
          <template slot="cardMain">
            <dv-scroll-board :config="config" class="scroll-board" style="width:100%;height:185px" />
          </template>
        </card>
      </a-col>
      <a-col :sm="12" :xxl="8" class="mb">
        <card :title="'园区环境'" :routerUrl="'/environment/skEnvironmentTable'">
          <template slot="cardMain">
            <a-row type="flex" justify="space-between" :wrap="true">
              <a-col :sm="12" :md="8" :xl="6" v-for="item in list" :key="item.img" class="environment">
                <div class="environment-img">
                  <img :src="item.img" alt="" />
                </div>
                <div class="environment-data">
                  <p>{{ item.title }}</p>
                  <p>{{ mergeEnvironment(item) }}</p>
                </div>
              </a-col>
            </a-row>
          </template>
        </card>
      </a-col>
      <a-col :sm="12" :xxl="8" class="mb">
        <card :title="'卫生保健'" :routerUrl="'/health/skTemperatureRecordList'">
          <template slot="cardMain">
            <line-echart
              :width="'100%'"
              :height="'185px'"
              :color="['#fe9a', '#fe9a8b']"
              :seriesName="'体温异常人数'"
              :xData="XData"
              :data="YData"
            ></line-echart>
          </template>
        </card>
      </a-col>
    </a-row>
  </div>
</template>
<script>
import u68 from '@/assets/analysis-img/u68.png'
import u69 from '@/assets/analysis-img/u69.png'
import u70 from '@/assets/analysis-img/u70.png'
import u71 from '@/assets/analysis-img/u71.png'
import u72 from '@/assets/analysis-img/u72.png'
import u73 from '@/assets/analysis-img/u73.png'
import u74 from '@/assets/analysis-img/u74.svg'
import LineEchart from '@/components/Echarts/line.vue'
import { getAction } from '@/api/manage.js'
export default {
  name: 'indexData',
  data() {
    return {
      span: 8,
      list: [
        { img: u68, title: '温度', val: '', key: 'temperature', unit: '℃' },
        { img: u69, title: '湿度', val: '', key: 'humidity', unit: '%' },
        { img: u70, title: '二氧化碳', val: '', key: 'co2', unit: 'PPM' },
        { img: u71, title: '有机化合物', val: '', key: 'tvoc', unit: 'μg/m³' },
        { img: u72, title: 'PM2.5', val: '', key: 'pm25', unit: 'μg/m³' },
        { img: u73, title: 'PM10',  val: '', key: 'pm10', unit: 'μg/m³' },
        { img: u74, title: '甲醛', val: '', key: 'ch2o', unit: 'mg/m³' }
      ],
      XData: [],
      YData: [],
      bodyStyle: { padding: '15px' },
      config: {
        
      }
    }
  },
  components: {
    LineEchart
  },

  filters: {},

  computed: {},

  created() {
    this.getEnvironment()
    this.getTemperature()
    this.getWarningList();
  },

  activated() {},

  mounted() {
    this.XData.push('星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日')
  },

  methods: {
    // 预警消息
    getWarningList(){
      const url = "/management/skDevice/getSwatchList"
      getAction(url).then((res)=>{
        if(res.success){
          let data = [];
          res.result.forEach(item => {
            data.push(
              [item.deviceName,item.deviceNo,item.electricQuantity + "%"]
            )
          });
          this.config = {
            header: ['手环名称', '手环编号', '剩余电量'],
            index: true,
            data:data,
            rowNum: 5,
            columnWidth: [44],
            // align: ['center'],
            headerBGC: '#33B6A4',
            oddRowBGC: '#fafafa',
            evenRowBGC: '#ffffff'
          }
        } else {
          this.$message.warning(res.message);
        }
      }).catch((error)=>{
        console.error(error);
      })
    },
    // 查询环境
    getEnvironment() {
      const url = '/environment/skEnvironment/queryNow'
      getAction(url)
        .then(res => {
          this.list.forEach(item => {
            if (res.result) {
              item.val = res.result[item.key].toFixed(0)
              this.list[0].val = res.result.temperature.toFixed(0)
            }else{
              item.val = null
            }
          })
        })
        .catch(error => {
          console.error(error)
        })
    },
    mergeEnvironment(item) {
      if (item.val != null) {
        return item.val + ' ' + item.unit
      } else {
        return '--'
      }
    },
    getTemperature() {
      let weekDays = this.$skCommon.getCurrentWeekDays()
      let d = new Date()
      let Y = d.getFullYear()
      const url = '/health/skTemperatureRecord/getTotalTemperatureStatistical'
      const params = {
        startDate: Y + '-' + weekDays[0],
        endDate: Y + '-' + weekDays[weekDays.length - 1],
        byType: 'day'
      }
      getAction(url, params)
        .then(res => {
          if (res.success) {
            weekDays.forEach(el => {
              let dataItem = res.result.find(item => el == item.statisticalDate.substring(5))
              if (dataItem) {
                this.YData.push(dataItem.abnormalNum)
              } else {
                this.YData.push(0)
              }
            })
          } else {
            this.message.warning(res.message)
          }
        })
        .catch(error => {
          console.error(error)
        })
    }
  }
}
</script>
<style scoped lang="less">
.mb {
  margin-bottom: 12px;
}
/deep/ .scroll-board {
  .header {
    height: 35px;
    background-color: @primary-color !important;
  }
  .ceil {
    color: #333;
  }
  .ceil:first-child {
    color: #fff;
  }
}
.right-icon {
  margin-left: 0;
  margin-top: 1px;
}

.environment {
  display: flex;
  align-items: center;
  margin-top: 20px;
  & > .environment-img {
    width: 55px;
    height: 55px;
    border: 1px solid #999;
    border-radius: 100%;
    line-height: 48px;
    text-align: center;
  }
  & > &-data {
    margin-left: 6px;
    p {
      margin: 6px 0;
    }
  }
}
</style>
